<!-- 
	动态组件：菜单组件
	props: 
		data: 组件数据
		
	action:
		
 -->
<template>
    <view
        class="dynamic-menu"
        :class="{ mixStyle: isMixSearchBanner }"
        :style="{
            'margin-left': getHeight(data.MenuMarginlr),
            'margin-right': getHeight(data.MenuMarginlr),
            'border-radius': getHeight(data.MenuRadius),
        }">
        <!-- 开启滑动 -->
        <swiper v-if="data.MenuDrag == '1'" class="swiper-menu">
            <swiper-item v-for="(swiperItem, index) in getSwiperMenus()" :key="index">
                <view class="dynamic-menu-items" :class="{ 'item-box-border': data.MenuBorder == '0' }">
                    <view
                        class="dynamic-menu-item touch"
                        v-for="(item, itemIndex) in swiperItem"
                        :key="itemIndex"
                        :style="{
                            width: getWidth(data.MenuLength),
                        }"
                        @click="click(item)">
                        <view class="dynamic-menu-item-box" :class="{ 'item-border': data.MenuBorder == '0' }">
                            <image
                                v-if="item.Icon && item.Icon.includes('http')"
                                class="icon-image"
                                :src="item.Icon"
                                :class="{
                                    'icon-style-1': data.MenuStyle == 1,
                                    'icon-style-2': data.MenuStyle == 2,
                                    'icon-style-3': data.MenuStyle == 3,
                                    'icon-style-4': data.MenuStyle == 4,
                                }"></image>
                            <view
                                v-else
                                class="icon-image icon-font"
                                :class="{
                                    'icon-style-1': data.MenuStyle == 1,
                                    'icon-style-2': data.MenuStyle == 2,
                                    'icon-style-3': data.MenuStyle == 3,
                                    'icon-style-4': data.MenuStyle == 4,
                                }">
                                <dynamic-iconsfont
                                    size="56"
                                    :customIcons="item.Icon ? item.Icon : 'icon-default'"></dynamic-iconsfont>
                            </view>
                            <text class="dynamic-menu-item-text">
                                {{ item.Name }}
                            </text>
                        </view>
                    </view>
                </view>
            </swiper-item>
        </swiper>

        <!-- 关闭滑动 -->
        <view v-else class="dynamic-menu-items" :class="{ 'item-box-border': data.MenuBorder == '0' }">
            <view
                class="dynamic-menu-item touch"
                v-for="(item, itemIndex) in data.MenuList"
                :key="itemIndex"
                :style="{
                    width: getWidth(data.MenuLength),
                }"
                @click="click(item)">
                <view class="dynamic-menu-item-box" :class="{ 'item-border': data.MenuBorder == '0' }">
                    <view class="dynamic-menu-item-icon">
                        <image
                            v-if="item.Icon && item.Icon.includes('http')"
                            class="icon-image"
                            :src="item.Icon"
                            :class="{
                                'icon-style-1': data.MenuStyle == 1,
                                'icon-style-2': data.MenuStyle == 2,
                                'icon-style-3': data.MenuStyle == 3,
                                'icon-style-4': data.MenuStyle == 4,
                            }"></image>
                        <view
                            v-else
                            class="icon-image icon-font"
                            :class="{
                                'icon-style-1': data.MenuStyle == 1,
                                'icon-style-2': data.MenuStyle == 2,
                                'icon-style-3': data.MenuStyle == 3,
                                'icon-style-4': data.MenuStyle == 4,
                            }"
                            :style="{ background: item.Iconbg }">
                            <dynamic-iconsfont
                                size="56"
                                :customIcons="item.Icon ? item.Icon : 'icon-default'"></dynamic-iconsfont>
                        </view>
                    </view>
                    <text class="dynamic-menu-item-text">
                        {{ item.Name }}
                    </text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { getNewArray } from "./utils/util.js"
import dynamicIconsfont from "./dynamic-iconsfont.vue"
import { getHeight } from "./utils/util.js"
export default {
    components: {
        dynamicIconsfont,
    },
    props: {
        data: {
            type: Object,
            default: () => {},
        },
        isMixSearchBanner: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {}
    },
    mounted() {
        this.$emit("loadBack", this.data.index)
    },
    methods: {
        getSwiperMenus() {
            if (!this.data.MenuList || this.data.MenuList.length < 1) {
                return []
            }
            return getNewArray(this.data.MenuList, this.data.MenuLength * 2)
        },
        getWidth(rowCount) {
            return 100 / rowCount + "%"
        },
        click(item) {
            this.$emit("menuClick", item)
        },
        getHeight(height) {
            return getHeight(height)
        },
    },
}
</script>

<style lang="scss" scope>
@import "@/uni-sub-base/components/dynamic/style/dynamic.scss";
.dynamic-menu {
    background: #ffffff;
    .dynamic-menu-items {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .dynamic-menu-item {
        .dynamic-menu-item-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: $dy-padding-default 0;
        }
        .icon-image {
            width: 80rpx;
            height: 80rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 10rpx;
        }
        .icon-font {
        }
        .dynamic-menu-item-text {
            font-size: 28rpx;
        }
        .icon-style-4 {
            border-radius: 50%;
            background-color: #ddd;
        }
        .icon-style-3 {
            border-radius: 16rpx;
            background-color: #ddd;
        }
        .icon-style-2 {
            background-color: #ddd;
        }
        .icon-style-1 {
        }
    }
    .item-box-border {
        border-top: 1px #f2f2f2 solid;
        border-left: 1px #f2f2f2 solid;
    }
    .item-border {
        border-bottom: 1px #f2f2f2 solid;
        border-right: 1px #f2f2f2 solid;
    }
}
.swiper-menu {
    height: 358rpx;
}
.mixStyle {
    margin: 0 $app-page-padding;
    border-radius: 16rpx;
}
</style>
